<template>
    <div class="login-container">
        <el-card class="box-card">
            <div class="login-body">
                <div class="login-title">可信软件供应链系统</div>
                <el-form ref="form" :model="userForm">
                    <el-input placeholder="请输入账号..." v-model="userForm.accountNumber" class="login-input">

                    </el-input>
                    <el-input placeholder="请输入密码..." v-model="userForm.userPassword" class="login-input"
                        @keyup.enter.native="login" show-password>

                    </el-input>

                    <el-select v-model="userForm.value" clearable placeholder="请选择" class="login-input">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>

                    <div class="login-submit">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="warning" @click="goToRegister" style="margin-left: 20px">注册</el-button>
                    </div>
                    <!-- <div class="other-submit">
                      <router-link to="/login-admin" class="sign-in-text">管理员登录</router-link>
                  </div> -->
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            userForm: {
                accountNumber: '',
                userPassword: '',

            },
            options: [
                {
                    value: '1',
                    label: '普通用户'
                },
                {
                    value: '2',
                    label: '审计人员'
                }],
        };
    },

    methods: {
        login() {
            this.$request.post("/login/", {
                username: this.userForm.accountNumber,
                password: this.userForm.userPassword,
                value: this.userForm.value
            }).then(res => {
                console.log(res);
                if (res.data.status === 200) {
                    localStorage.setItem("username", res.data.username);
                    localStorage.setItem("user_id", res.data.user_id);
                    localStorage.setItem("isAdmin", res.data.isAdmin);
                    localStorage.setItem("token", res.data.token);
                    this.$message.success("登陆成功")

                    if (res.data.isAdmin == 1) { this.$router.replace({ path: '/sys/main' }); }
                    else { this.$router.push('/sys/main') }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        goToRegister() {
        this.$router.push('/register');
        }
    }
}
</script>

<style scoped>
.login-container {
    background-image: url('/src/assets/bj.jpg'); /* 替换为你的图片路径 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;

}

.login-body {
    padding: 30px;
    width: 300px;
    height: 100%;
}

.login-title {
    padding-bottom: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #409EFF;
    cursor: pointer;
}

.login-input {
    width: 280px;
    margin-bottom: 20px;
}

.login-submit {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.sign-in-container {
    padding: 0 10px;
}

.sign-in-text {
    color: #409EFF;
    font-size: 16px;
    text-decoration: none;
    line-height: 28px;
}

.other-submit {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-left: 200px;
}
</style>